<template>
  <div>
    <el-card class="box-card">
      <div class="search">
        <span>查询内容:</span>
        <el-input size="small" placeholder="项目名称/负责人/项目类型/合同额..."></el-input>
        <el-button size="small">查询</el-button>
        <el-button size="small" @click="dialogFormVisible = true">高级查询</el-button>

        <!--弹框-->
        <el-dialog :title="'内容查询'" :width="dialogWidth" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="项目名称">
              <el-input style="width: 60%;" size="small" clearable v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所处环节">
              <el-select style="width:60%;margin-left: 10px;" size="small" v-model="form.process" placeholder="请选择活动区域">
                <el-option label="所有" value="all"></el-option>
                <el-option label="内审修改" value="inner_edit"></el-option>
                <el-option label="技审修改" value="tec_edit"></el-option>
                <el-option label="风险分析审核" value="crisis"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="转入时间">
              <el-date-picker
                  v-model="form.enter_time"
                  align="center"
                  size="small"
                  style="width: 60%;"
                  type="datetime"
                  placeholder="选择日期时间"
                  :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="dialogFormVisible = false">查  询</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
    <el-card shadow="hover">
      <div>
        <span>
          <el-link :type="show ? 'danger' : ''" @click="willDone" :underline="false">
            <el-icon style="margin-right: 3px;" class="el-icon-time"></el-icon>待处理
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :type="show ? '' : 'success'" @click="haveDone" :underline="false">
            <el-icon  style="margin-right: 3px;" class="el-icon-success"></el-icon>已处理
          </el-link>
        </span>
        <el-button style="float: right;margin-bottom: 4px;" size="small">导出</el-button>
      </div>
      <div>
        <transition name="el-zoom-in-top">
          <div v-if="show">
            <el-table
                    :data="tableData1"
                    style="width: 100%"
                    height="290">
                  <el-table-column
                      type="selection"
                      width="55"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="id"
                      label="序号"
                      width="80"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="项目名称"
                      width="150"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="process"
                      label="项目所处环节"
                      width="150"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      prop="enter_time"
                      label="转入时间"
                      align="center">
                  </el-table-column>
                  <el-table-column
                      label="操作"
                      width="100"
                      align="center">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                      <el-button type="text" size="small">编辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            <div class="block">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage4"
                      :page-sizes="[100, 200, 300, 400]"
                      :page-size="100"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="400">
                  </el-pagination>
                </div>
          </div>
        </transition>
        <transition name="el-zoom-in-bottom">
          <div v-if="!show">
            <el-table
                :data="tableData2"
                style="width: 100%"
                height="290">
              <el-table-column
                  type="selection"
                  width="55"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="id"
                  label="序号"
                  width="80"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="项目名称"
                  width="150"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="process"
                  label="项目所处环节"
                  width="150"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="advice"
                  label="审核意见"
                  align="center">
              </el-table-column>
              <el-table-column
                  prop="read_time"
                  label="审核时间"
                  align="center">
              </el-table-column>
              <el-table-column
                  label="操作"
                  width="100"
                  align="center">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
              </el-pagination>
            </div>
          </div>
        </transition>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Remember",
  data(){
    return{
      show: true,
      dialogFormVisible: false,
      dialogWidth: '450px',
      form:{
        name: '',
        process: '',
        enter_time: '',
      },

      //日期选择
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

      //分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData1: [{
        id: '1',
        name: 'AAAA',
        process: '内审修改',
        enter_time: '2022/02/23 04:23:12'
      }, {
        id: '2',
        name: 'AAAA',
        process: '技术审核',
        enter_time: '2022/02/23 04:23:12'
      }, {
        id: '3',
        name: 'AAAA',
        process: '过程控制审核',
        enter_time: '2022/02/23 04:23:12'
      }, {
        id: '4',
        name: 'AAAA',
        process: '过程控制审核',
        enter_time: '2022/02/23 04:23:12'
      }, {
        id: '5',
        name: 'AAAA',
        process: '过程控制审核',
        enter_time: '2022/02/23 04:23:12'
      }, {
        id: '6',
        name: 'AAAA',
        process: '过程控制审核',
        enter_time: '2022/02/23 04:23:12'
      }, {
        id: '7',
        name: 'AAAA',
        process: '过程控制审核',
        enter_time: '2022/02/23 04:23:12'
      }],
      tableData2: [{
        id: '1',
        name: 'AAAA',
        process: '内审修改',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }, {
        id: '2',
        name: 'AAAA',
        process: '技术审核',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }, {
        id: '3',
        name: 'AAAA',
        process: '过程控制审核',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }, {
        id: '4',
        name: 'AAAA',
        process: '过程控制审核',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }, {
        id: '5',
        name: 'AAAA',
        process: '过程控制审核',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }, {
        id: '6',
        name: 'AAAA',
        process: '过程控制审核',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }, {
        id: '7',
        name: 'AAAA',
        process: '过程控制审核',
        advice: '同意',
        read_time: '2022/02/23 04:23:12',
      }]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    willDone() {
      this.show = true
    },
    haveDone() {
      this.show = false
    },
  }
}
</script>

<style lang="scss" scoped>
  .box-card{
    font-size: 18px;
    width: 100%;
    margin-bottom: 10px;
    .btn{
      margin-bottom: 10px;
      .el-button{
        margin-left: 10px;
      }
    }
    .search{
      .el-input{
        margin-left: 10px;
        width: 30%;
      }
      .el-button{
        margin-left: 10px;
      }
    }
  }

  .block{
    text-align: center;
    padding-top: 10px;
  }
</style>
